<template>
  <div>
    <el-table
      :data="reset"
      :header-cell-style="{background:'#eef1f6',color:'#909399'}"
      border
      style="width: 100%"
      @selection-change="change">
      <el-table-column
        align="center"
        type="selection"
        width="45">
      </el-table-column>
      <el-table-column
        :index="indexMethod"
        align="center"
        label="序号"
        type="index"
        width="50">
      </el-table-column>

      <el-table-column
        align="center"
        label="平台销售订单"
        prop="NetOrderId"
        width="140">
        <template slot-scope="scope">
          <span style="color:#46a6ff;cursor:pointer" @click="looking(scope.row)">{{ scope.row.NetOrderId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="客户名称"
        prop="Name"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        label="订单类型"
        prop="OrderTypeFormat"
        width="100">
      </el-table-column>
      <el-table-column
        align="center"
        label="订单金额"
        prop="OrderFee"
        sortable
        width="110">
      </el-table-column>
      <el-table-column
        align="center"
        label="支付方式"
        prop="PaymentTypeFormat"
        width="90">
      </el-table-column>
      <el-table-column
        align="center"
        label="配送方式"
        prop="ShippingCompanyName">
        <template slot-scope="scope">
          <span style="color:#46a6ff;cursor:pointer"
                @click="distribution(scope.row)">{{ scope.row.ShippingCompanyName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="运输方式"
        prop="ExpressTypeFormat">
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="付款时间"
        prop="PaymentTime"
        sortable>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="创建时间"
        prop="CreateTime"
        sortable>
      </el-table-column>
      <el-table-column
        align="center"
        label="订单状态"
        prop="StatusFormat">
        <template slot-scope="scope">
          <span v-if="scope.row.Status=== 2" style="backgroundColor:#ff9800;color:#fff">
            {{ scope.row.StatusFormat }}
          </span>
          <span v-else-if="scope.row.Status=== 4" style="backgroundColor:#42b983;color:#fff">
            {{ scope.row.StatusFormat }}
          </span>
          <span v-else style="backgroundColor:#fff">
            {{ scope.row.StatusFormat }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="订单优先级"
        prop="PriorityFormat"
        sortable
        width="120">
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.Status !== 0" plain round size="mini" type="primary"
                     @click="handleSuspend(scope.row)">暂停
          </el-button>
          <el-button v-if="scope.row.Status === 0" plain round size="mini" @click="handleRecovery(scope.row)">恢复
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 快递路由信息 -->
    <el-dialog :close-on-click-modal='false' :visible.sync="expressage" center title="快递详情" width="600px">
      <div class="thumbs">
        <div style="width:100%;display:flex;justify-content : space-between;">
          <div class="title">
            快递轨迹
          </div>
          <div>
            订单号：{{ orderId }}
          </div>
        </div>
        <div class="paging" style="margin:10px 0">
          <el-pagination
            :page-size="1"
            :total=listRouter.length
            layout="prev, pager, next"
            small
            @current-change="handleCurrentChangeRouter">
          </el-pagination>
        </div>
        <!-- <div class="hint">暂无物流信息</div> -->
        <div class="order-step">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in ShippingRouteInfos"
              :key="index"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.accept_time"
            >
              {{ activity.remark }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="Dialog1Visible" center width="89.7%">
      <!-- 照片明细弹出框 -->
      <el-dialog :close-on-click-modal='false' :visible.sync="photoDialogLogVisible" append-to-body center title="照片明细"
                 width="600px">
        <div class="thumbs">
          <vue-preview :slides="slide1"></vue-preview>
        </div>
      </el-dialog>

      <!-- sn条码弹出框 -->
      <el-dialog :close-on-click-modal='false' :visible.sync="SNDialogLogVisible" append-to-body center title="SN条码展示"
                 width="600px">
        <el-table
          :data="slide1"

          :header-cell-style="{background:'#eef1f6',color:'#909399'}"
          border
          height="485px"
          style="width: 100%">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            align="center"
            label="照片名称"
            prop="FileName">
          </el-table-column>
          <el-table-column
            align="center"
            label="照片条码"
            prop="OrderFileCode">
          </el-table-column>
        </el-table>
        <!-- <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p> -->
      </el-dialog>

      <!--      OrderProductID: 69615-->
      <!--   订单产品列表   -->
      <el-card v-for="productData in productList" :key="productData.productData">
        <div slot="header" class="clearfix">
          <el-tag effect="plain">SN :{{ productData.OrderProductCode }}</el-tag>
          <el-tag effect="plain">用户名:{{ productData.CtmName }}</el-tag>
          <el-tag effect="plain">面积:{{ productData.Area }}</el-tag>
          <el-tag effect="plain">实际面积:{{ productData.FactArea }}</el-tag>

          <div style="float: right; ">
            <el-button-group>
              <el-button size="mini" icon="el-icon-menu" type="primary" @click="lookSnCode(productData.OrderProductID)">
                {{ `查看组件列表` }}
              </el-button>
              <el-button size="mini" icon="el-icon-d-arrow-right" type="primary" @click="handleClick(productData.OrderProductID)">
                {{ `下一道工序` }}
              </el-button>
              <el-button size="mini" v-if="productData.Status !== 0" icon="el-icon-video-pause" type="primary"
                         @click="handleDeatilSuspend(productData)">暂停
              </el-button>
              <el-button size="mini" v-if="productData.Status === 0" icon="el-icon-video-play" type="primary"
                         @click="handleDetailRecovery(productData)">
                恢复
              </el-button>
            </el-button-group>
          </div>
        </div>

        <el-table
          :data="productData.OrderProductPartVos"
          :header-cell-style="{background:'#eef1f6',color:'#909399'}"
          border
          style="width:98%">
          <!-- <el-table-column
          prop="OrderProductId"
          label="序号"
          width="50">
          </el-table-column> -->
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="50">
          </el-table-column>

          <el-table-column
            align="center"
            label="面积"
            prop="Area"
            width="80">
          </el-table-column>

          <el-table-column
            align="center"
            label="组件名称"
            prop="PartName"
            width="150"
            @cell-click="handleCurrentChange">
            <template slot-scope="scope">
              <span style="color:#0095FF;cursor:pointer"
                    @click="lookphoto(scope.row,productData.OrderProductID)">{{ scope.row.PartName }}</span>
              <!-- <span @cell-click="handleCurrentChange(scope.row)" style="color:#0095FF;cursor:pointer">{{scope.row.ProductName}}</span> -->
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="照片张数"
            prop="PhotoNum"
            width="80">
          </el-table-column>

          <el-table-column
            align="center"
            label="更新时间"
            prop="LastUpdate"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="产品号"
            prop="PartCode"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="尺寸"
            prop="Sec"
          >
          </el-table-column>

          <!--          OrderProductID-->
          <!--          OrderProductPartId: 69672-->
          <!--          ProductionPlanVo: [{ProductionPlanNo: "PL201221191133803", CreateTime: "2020-12-21 19:11:33"}]-->

          <!--          <el-table-column-->
          <!--            align="center"-->
          <!--            label="SN条形码"-->
          <!--            prop="PartCode"-->
          <!--            width="140">-->
          <!--            <template slot-scope="scope">-->
          <!--                                <span style="color:#0095FF;cursor:pointer"-->
          <!--                                      @click="lookSnCode(scope.row,productData.OrderProductID)">{{ scope.row.OrderProductCode }}</span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->

          <el-table-column
            align="center"
            label="下一道工序"
            prop="CurrentTechName">
            <template slot-scope="scope">
              <el-tag type="primary">{{ scope.row.CurrentTechName }}</el-tag>
            </template>
            <!--            <template slot-scope="scope">-->
            <!--            <span style="color:#0095FF;cursor:pointer"-->
            <!--                  @click="handleClick(scope.row,productData.OrderProductID)">{{ scope.row.CurrentTechName }}</span>-->
            <!--            </template>-->
          </el-table-column>

          <!--          <el-table-column-->
          <!--            align="center"-->
          <!--            fixed="right"-->
          <!--            label="操作"-->
          <!--            width="100"-->
          <!--          >-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button @click="handleDeatilSuspend(scope.row)" plain round size="mini" type="primary"-->
          <!--                         v-if="scope.row.Status !== 0">暂停-->
          <!--              </el-button>-->
          <!--              <el-button @click="handleDetailRecovery(scope.row)" plain round size="mini" v-if="scope.row.Status === 0">-->
          <!--                恢复-->
          <!--              </el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!-- <el-table-column
          prop="address"
          label="产品金额"
          align="center"
          width="100">
          </el-table-column> -->
        </el-table>

      </el-card>

    </el-dialog>


    <el-dialog :visible.sync="dialogVisibleProcess" title="组件流程">
      <componentProcess :column-des-objs="columnDesObjs" :total-table="componentsProcessTable"></componentProcess>
    </el-dialog>
  </div>
</template>


<script>
import {
  expressMessage,
  getOrderFileDOList,
  GetOrderProductList,
  GetOrderProductPartRoutes,
  PauseOrder,
  PauseOrderProduct,
  ResumeOrder,
  ResumeOrderProduct
} from '@/api/project'
import {ERR_OK} from '@/utils/commons'
import componentProcess from '@/views/production/components/componentProcess'
import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'

export default {
  props: {
    reset: {
      type: Array
    },
    init: {
      type: Function
    }
  },
  components: {AzureDynamicTable, componentProcess},
  data() {
    return {
      // column:{
      //   prop:'Name,OrderFee,PaymentTime,CreateTime,PriorityFormat',
      //   order:'ascending'
      // },
      loading: false,
      currentRow: {},
      count: [],
      slide1: [],
      productList: [],
      Dialog1Visible: false,
      photoDialogLogVisible: false,
      SNDialogLogVisible: false,
      expressage: false,  //  快递的弹出框 默认为隐藏
      listRouter: [],  //快递全部路由信息
      list: [], //单条快递路由信息
      orderId: 0,  //快递对应的单号
      ShippingRouteInfos: [],
      dialogVisibleProcess: false,
      componentsProcessTable: [],
      columnDesObjs: [
        {label: '工序名称', key: 'TechVo'},
        {label: '操作时间', key: 'CompletedTime',},
        {label: '操作人', key: 'UserName'},
        {label: '状态', key: 'DisplayStatus'},
      ]

    }
  },
  // computed: {
  //   noMore () {
  //     return this.count >= this.slide1.length
  //   },
  //   disabled () {
  //     return this.loading || this.noMore
  //   }
  // },
  mounted() {

  },
  methods: {
    // 路由切换
    handleCurrentChangeRouter(val) {
      this.list = this.listRouter[val - 1];
      this.orderId = this.listRouter[val - 1].ShippingNo;
      this.ShippingRouteInfos = this.listRouter[val - 1].ShippingRouteInfos
    },
    // 配送方式  弹出框
    distribution(el) {
      // if(el.StatusFormat=="已发货"){
      this.expressage = true;
      expressMessage({netOrderId: el.NetOrderId}).then((res) => {
        this.listRouter = res.Result;
        // this.list=this.listRouter[0]
        this.listRouter.forEach(el => {
          el.ShippingRouteInfos.reverse()
        });
        this.ShippingRouteInfos = this.listRouter[0].ShippingRouteInfos;
        this.orderId = this.listRouter[0].ShippingNo
      }).catch((error) => {
        this.listRouter = [];
        this.orderId = 0;
        this.list = [];
        this.ShippingRouteInfos = [];
        console.log(error)
      })
      // }else{
      //   this.$message({
      //   message: '暂无物流信息',
      //   type: 'warning'
      //   });
      // }
    },
    change(data) {
      this.$emit('changeData', data)
    },
    indexMethod(index) {
      return (index + 1) + (this.$parent.currentPage - 1) * this.$parent.size
    },
    lookphoto(row, OrderProductID) {

      this.handleCurrentChange(row, OrderProductID)
    },

    //  查看下一道工序
    async handleClick(OrderProductId) {
      this.dialogVisibleProcess = true;
      const {Result, Code} = await GetOrderProductPartRoutes({OrderProductId});
      if (Code === ERR_OK) {
        this.componentsProcessTable = Result
      }
    },
    handleCurrentChange(row, orderProductID) {
      // console.log(row);
      // this.currentRow = row;
      //获取照片明细
      getOrderFileDOList({orderProductID}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.photoDialogLogVisible = true
        }
        res.Result.forEach(item => {
          item.src = item.CompressPath;
          item.msrc = item.CompressPath;
          item.alt = item.FileName;
          item.title = item.FileName;
          item.w = 400;
          item.h = 450
        });
        this.slide1 = res.Result
      })
        .catch(error => {
          console.log(error);
          Toast({
            message: '获取缩略图图片失败...'
          })
        })
    },
    lookSnCode(OrderProductID) {
      // this.currentRow = row;
      // this.SNDialogLogVisible = true
      getOrderFileDOList({orderProductID: OrderProductID}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.SNDialogLogVisible = true;
          this.slide1 = res.Result
          // this.count = res.Result
        }
      }).catch(res => {
      })
    },
    // load(){
    //   this.loading = true
    //   setTimeout(() => {
    //     for(var i=0; i<=10; i++){
    //       this.count.push(this.slide1[i*10])
    //     }
    //     Math.ceil(this.slide1.length/10)
    //     this.loading = false
    //   }, 500)
    // },

    // 点击订单号弹出产品详情
    looking(row) {
      // this.productList = []
      GetOrderProductList({orderBagID: parseInt(row.OrderbagId)}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.Dialog1Visible = true;
          this.productList = res.Result;
          this.order = row
        }
      })
    },
    async handleSuspend(row) {
      console.log(row, 443);
      const {OrderbagId} = row;
      const {Result, Code} = await PauseOrder({OrderbagId});
      if (Code === ERR_OK) {
        this.init()
      }
    },
    async handleRecovery(row) {
      const {OrderbagId} = row;
      const {Result, Code} = await ResumeOrder({OrderbagId});
      if (Code === ERR_OK) {
        this.init()
      }
    },
    async handleDeatilSuspend(row) {
      const orderProductIds = [row.OrderProductId];
      const {Result, Code} = await PauseOrderProduct(
        orderProductIds
      );
      if (Code === ERR_OK) {
        this.looking(this.order)
      }
    },
    async handleDetailRecovery(row) {
      const orderProductIds = [row.OrderProductId];
      const {Result, Code} = await ResumeOrderProduct(
        orderProductIds
      );
      if (Code === ERR_OK) {
        this.looking(this.order)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.thumbs {
  height: 400px;
  // background-color: #eee;
  overflow-x: hidden;

  /deep/ .my-gallery {
    display: flex;
    flex-wrap: wrap;

    figure {
      width: 23%;
      margin: 5px;
      float: left;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

</style>
